<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class="col pb-0 p-0" style="font-size: 24px">
        Dropdown
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column  p-0 col-4" style="width: 100%">
                <div class="wind100 d-flex  p-0 align-items-center">
                    <div class="col-6 p-0">
                        <label>Label </label>
                        <div class="unis-select unis-dropdown ">
                            <input type="button" value="data" placeholder="data" class="">
                        </div>
                    </div>
                    <div class="ml-4">Dropdown with data</div>
                </div>
                <div class="wind100  d-flex mt-4 p-0 align-items-center">
                    <div class="col-6 p-0">
                        <label>Label </label>
                        <div class="unis-select unis-dropdown disabled">
                            <input type="button" value="Selected" disabled placeholder="data"
                                   class="">
                            <ul>
                                <li>Option 1</li>
                                <li>Option 2</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-6 ml-4">Disabled</div>
                </div>
                <div class="wind100  d-flex mt-4 p-0 align-items-center">
                    <div class="col-6 p-0">
                        <label>Label </label>
                        <div class="unis-select unis-dropdown">
                            <input type="button" value="Selected" disabled placeholder="data"
                                   class="">
                            <i class="icon-30 f-20 mr-3 cursor-p"></i>
                            <ul>
                                <li>Option 1</li>
                                <li>Option 2</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-6 ml-4"></div>
                </div>
                <div class="wind100 d-flex  mt-4  p-0 align-items-center">
                    <div class="col-6 p-0">
                        <label>Label </label>
                        <div class="unis-select unis-dropdown error">
                            <input type="button" value="Selected" placeholder="data" class="" error>
                            <div class="message">Error Message If Requirement</div>
                        </div>
                    </div>
                    <div class="col-6 ml-4">Error Message If Requirement</div>
                </div>
                <div class="wid100 d-flex   mt-4  p-0 align-items-center" style="margin-bottom: 120px">
                    <div class="col-6 p-0">
                        <label>Label </label>
                        <div class="unis-select unis-dropdown active">
                            <input type="button" value="Selected" placeholder="data" class="">
                            <ul>
                                <li>Option 1</li>
                                <li>Option 2</li>
                                <li>Option 3</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-6 ml-4">Dropdown pressed</div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="d-flex flex-column  p-0 col-4">
                <div class="col-6 p-0">
                    <label>Compact  </label>
                    <div class="unis-select unis-dropdown compact">
                        <input type="button" value="data" class="">
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-select unis-dropdown">
                <input type="button" value="Selected" placeholder="data" class="">
            </div>
            <div class="unis-select unis-dropdown error">
                <input type="button" value="Selected" placeholder="data" class="" error>
                <div class="message">Error Message If Requirement</div>
            </div>
            <div class="unis-select unis-dropdown disabled mt-4">
                <input type="button" value="Selected" placeholder="data" class="" disabled>
            </div>
            <div class="unis-select unis-dropdown">
                <input type="button" value="Selected" disabled placeholder="data" class="">
                <i class="icon-30 f-20 mr-3 cursor-p"></i>
                <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                </ul>
            </div>
            <div class="unis-select unis-dropdown active">
                <input type="button" value="Selected" placeholder="data" class="">
                <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                </ul>
            </div>
            <div class="col-6 p-0">
                <label>Compact  </label>
                <div class="unis-select unis-dropdown compact">
                    <input type="button" value="data" class=" ">
                </div>
            </div>
        </template>
    </dfault-vuew>





    <div class=" mt-4 pt-4  col p-0" style="font-size: 24px">
        Text field dropdown
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column  p-0 col-4" style="width: 100%">
                <div class="d-flex flex-column mb-4" style="width: 100%">
                    <div class="wind100 d-flex  p-0 align-items-center">
                        <div class="wid100 d-flex mt-3 p-0 align-items-center">
                            <div class="col-6 p-0">
                                <label>Label Text</label>
                                <div class="unis-select unis-dropdown">
                                    <input type="text" value="data" placeholder="data" class=" ">
                                </div>
                            </div>
                            <div class="col-6 ml-4">Error Message If Requirement</div>
                        </div>
                    </div>
                    <div class="wid100 d-flex mt-4 p-0 align-items-center">
                        <div class="col-6 p-0">
                            <label>Label Text</label>
                            <div class="unis-select unis-dropdown disabled">
                                <input type="text" value="data" placeholder="data" class=" "
                                       disabled/>
                                <ul>
                                    <li>Option 1</li>
                                    <li>Option 2</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-6 ml-4">Disabled</div>
                    </div>
                    <div class="wid100 d-flex mt-4 p-0 align-items-center">
                        <div class="col-6 p-0">
                            <div class="unis-select unis-dropdown">
                                <input type="text" value="Selected" placeholder="data" class="">
                                <i class="icon-30 f-20 mr-3 cursor-p"></i>
                                <ul>
                                    <li>Option 1</li>
                                    <li>Option 2</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="wid100 d-flex mt-3 p-0 align-items-center">
                        <div class="col-6 p-0">
                            <label>Label Text</label>
                            <div class="unis-select unis-dropdown error">
                                <input type="text" value="data" placeholder="data" class=" " error/>
                                <div class="message">Error Message If Requirement</div>
                            </div>
                        </div>
                        <div class="col-6 ml-4">Error Message If Requirement</div>
                    </div>


                </div>
            </div>
            <div class="col-1"></div>
            <div class="d-flex flex-column  p-0 col-4">
                <div class="col-6 p-0">
                    <label>Compact</label>
                    <div class="unis-select unis-dropdown compact">
                        <input type="text" value="data" placeholder="data"
                               class=" ">
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <label>Label Text</label>
            <div class="unis-select unis-dropdown">
                <input type="text" value="data" placeholder="data" class=" ">
            </div>
            <div class="unis-select unis-dropdown  error">
                <input type="text" value="Selected" class=" " error>
                <div class="message">Error Message If Requirement</div>
            </div>
            <div class="unis-select unis-dropdown">
                <input type="text" value="Selected" placeholder="data" class="">
                <i class="icon-30 f-20 mr-3 cursor-p"></i>
                <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                </ul>
            </div>
            <div class="unis-select unis-dropdown  disabled">
                <input type="text" value="Selected" class=" " disabled>
            </div>
            <div class="unis-select unis-dropdown  active">
                <input type="text" value="Active" class=" " disabled>
                <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                </ul>
            </div>
            <div class="col-6 p-0">
                <label>Compact </label>
                <div class="unis-select unis-dropdown compact">
                    <input type="text" value="data" placeholder="data"
                           class=" ">
                </div>
            </div>
        </template>
    </dfault-vuew>

<!--


    <div class="  mb-3 p-0" style="font-size: 24px;margin-top: 60px">
        Dropdown with multiselect
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-5 p-0">
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 160px">
                            <label>Active</label>
                            <div claunis-old-2021unis-select active">
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        item
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 0px">
                            <label>Disabled</label>
                            <div claunis-old-2021unis-select disabled ">
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        item
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mb-4 col-12 p-0">
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 10px">
                                <label>Error</label>
                                <div claunis-old-2021unis-select error">
                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <div class="message">Error Message If Requirement</div>
                                    <ul>
                                        <li class="m-0" v-for="index in 6">
                                            item
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 p-0">
                <div class="d-flex mb-4 " style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 160px">
                            <label>compact</label>
                            <div claunis-old-2021unis-select compact active">
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        item
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Active</label>
            <div claunis-old-2021unis-select active">
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <ul>
                    <li class="m-0" v-for="index in 6">
                        item
                    </li>
                </ul>
            </div>
            <label>Disabled</label>
            <div claunis-old-2021unis-select disabled ">
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <ul>
                    <li class="m-0" v-for="index in 6">
                        item
                    </li>
                </ul>
            </div>

            <label>Error</label>
            <div claunis-old-2021unis-select error">
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="message">Error Message If Requirement</div>
                <ul>
                    <li class="m-0" v-for="index in 6">
                        item
                    </li>
                </ul>
            </div>
            <label>compact</label>
            <div claunis-old-2021unis-select compact active">
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                <ul>
                    <li class="m-0" v-for="index in 6">
                        item
                    </li>
                </ul>
            </div>
        </template>
    </dfault-vuew>
-->



    <div class="  mb-3 p-0" style="font-size: 24px; margin-top: 60px">
        Dropdown with multiselect / checkbox
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-5 p-0">
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 0px">

                            <div class="unis-select">
                                Option 11 , Option 11 ,Option 11
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        <input class="unis-checkbox" type="checkbox" name="layout"
                                               :id="'id7i'+index">
                                        <label :for="'id7i'+index" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mb-4 col-12 p-0 " style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 160px">
                            <label>Active</label>
                            <div class="unis-select  active">
                                Option 11 , Option 11 ,Option 11
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        <input class="unis-checkbox" type="checkbox" name="layout"
                                               :id="'nameis7e'+index">
                                        <label :for="'nameis7e'+index" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom:30px">
                            <label>Disabled</label>
                            <div class="unis-select  disabled">
                                Option 11 , Option 11 ,Option 11
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        <input class="unis-checkbox" type="checkbox" name="layout"
                                               :id="'name7'+index">
                                        <label :for="'name7'+index" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom:30px">
                            <label>Error</label>
                            <div class="unis-select error">
                                Option 11 , Option 11 ,Option 11
                                <div class="message">Error Message If Requirement</div>
                                <ul>
                                    <li class="m-0" v-for="index in 6">
                                        <input class="unis-checkbox" type="checkbox" name="layout"
                                               :id="'name7'+index">
                                        <label :for="'name7'+index" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="d-flex mb-4 col-12 p-0" style="width: 100%">
                    <div class="col-6 p-0">
                        <div style="margin-bottom: 0px">
                            <label>Compact</label>
                            <div class="unis-select compact">
                                Option 11 , Option 11 ,Option 11
                                <ul>
                                    <li class="m-0" v-for="index in 1">
                                        <input class="unis-checkbox" type="checkbox" name="layout"
                                               :id="'name7i'+index">
                                        <label :for="'name7i'+index" class="m-0 pl-3_5">item</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class="unis-select  active">
                Option 11 , Option 11 ,Option 11
                <ul>
                    <li class="m-0" v-for="index in 1">
                        <input class="unis-checkbox" type="checkbox" name="layout" :id="'ids7s'+index">
                        <label :for="'id7ss'+index" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
            <label>Active</label>
            <div class="unis-select  active">
                Option 11 , Option 11 ,Option 11
                <ul>
                    <li class="m-0" v-for="index in 1">
                        <input class="unis-checkbox" type="checkbox" name="layout"
                               :id="'nameis7e'+index">
                        <label :for="'nameis7e'+index" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>

            <label>Disabled</label>
            <div class="unis-select  disabled">
                Option 11 , Option 11 ,Option 11
                <ul>
                    <li class="m-0" v-for="index in 1">
                        <input class="unis-checkbox" type="checkbox" name="layout"
                               :id="'name7'+index">
                        <label :for="'name7'+index" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
            <label>Error</label>
            <div class="unis-select error">
                Option 11 , Option 11 ,Option 11
                <div class="message">Error Message If Requirement</div>
                <ul>
                    <li class="m-0" v-for="index in 1">
                        <input class="unis-checkbox" type="checkbox" name="layout"
                               :id="'name7'+index">
                        <label :for="'name7'+index" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>
            <label>Compact</label>
            <div class="unis-select compact">
                Option 11 , Option 11 ,Option 11
                <ul>
                    <li class="m-0" v-for="index in 1">
                        <input class="unis-checkbox" type="checkbox" name="layout"
                               :id="'name7i'+index">
                        <label :for="'name7i'+index" class="m-0 pl-3_5">item</label>
                    </li>
                </ul>
            </div>

        </template>
    </dfault-vuew>




    <div class="  mb-3 p-0" style="font-size: 24px; margin-top: 60px">
        Multiselect - search
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 col-5 p-0 " style="width: 100%">
                <div class="col-6 p-0">
                    <div style="margin-bottom:150px">
                        <div class="unis-multiselect active">
                            <i class="icon-7 f-20"></i>

                            <input type="text" class="" placeholder="Enter A Keyword...">
                            <ul>
                                <li class="m-0" v-for="ii in 6">
                                    <input type="checkbox" name="layout" :id="'Multiselect'+ ii" class="unis-checkbox">
                                    <label :for="'Multiselect'+ ii" >item</label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class="unis-multiselect active">
                <i class="icon-7 f-20"></i>

                <input type="text" class="" placeholder="Enter A Keyword...">
                <ul>
                    <li class="m-0" v-for="ii in 6">
                        <input type="checkbox" name="layout" :id="'Multiselect'+ ii" class="unis-checkbox">
                        <label :for="'Multiselect'+ ii" >item</label>
                    </li>
                </ul>
            </div>
        </template>
    </dfault-vuew>

   <!-- <div class="d-flex">
        <div class="col-6 p-0">

            <div class=" mt-4 col p-0 " style="font-size:18px; margin-top: 60px">
                Compact
            </div>

            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 135px">
                                <div claunis-old-2021unis-multiselect active">

                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <input type="text" class="" placeholder="Enter A Keyword...">
                                    <ul>
                                        <li class="m-0" v-for="index in 8">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect active">
                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                        <input type="text" class="" placeholder="Enter A Keyword...">
                        <ul>
                            <li class="m-0" v-for="index in 8">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 135px">
                                <div claunis-old-2021unis-multiselect active">
                                    <i class="icon-7 f-24"></i>
                                    <div class="d-flex flex-wrap">
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <input type="text" class="" placeholder="Enter A Keyword...">
                                    </div>

                                    <ul>
                                        <li class="m-0" v-for="index in 8">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect active">
                        <i class="icon-7 f-20"></i>
                        <div class="d-flex flex-wrap">
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <input type="text" class="" placeholder="Enter A Keyword...">
                        </div>
                        <ul>
                            <li class="m-0" v-for="index in 8">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect ">
                                    <i class="icon-7 f-20"></i>
                                    <div class="d-flex flex-wrap">
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <input type="text" class="" placeholder="Enter A Keyword...">
                                    </div>
                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect ">
                        <i class="icon-7 f-20"></i>
                        <div class="d-flex flex-wrap">
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <input type="text" class="" placeholder="Enter A Keyword...">
                        </div>
                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            Disabled
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect disabled">
                                    <i class="icon-7 f-20"></i>
                                    <input type="text" class="" placeholder="Enter A Keyword...">
                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect disabled">
                        <i class="icon-7 f-20"></i>
                        <input type="text" class="" placeholder="Enter A Keyword...">
                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>

            Error
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect error">
                                    <i class="icon-7 f-20"></i>

                                    <input type="text" class="" placeholder="Enter A Keyword...">

                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect error">
                        <i class="icon-7 f-20"></i>

                        <input type="text" class="" placeholder="Enter A Keyword...">

                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>


        </div>
        <div class="col-6 p-0">

            <div class=" mt-4 col p-0 " style="font-size:18px; margin-top: 60px">
                compact
            </div>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect compact ">
                                    <i class="icon-7 f-20"></i>
                                    <div class="d-flex flex-wrap">
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <input type="text" class="" placeholder="Enter A Keyword...">
                                    </div>
                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect compact ">
                        <i class="icon-7 f-20"></i>
                        <div class="d-flex flex-wrap">
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <input type="text" class="" placeholder="Enter A Keyword...">
                        </div>
                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 135px">
                                <div claunis-old-2021unis-multiselect compact active">

                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                    <input type="text" class="" placeholder="Enter A Keyword...">
                                    <ul>
                                        <li class="m-0" v-for="index in 8">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect compact active">
                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                        <input type="text" class="" placeholder="Enter A Keyword...">
                        <ul>
                            <li class="m-0" v-for="index in 8">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 135px">
                                <div claunis-old-2021unis-multiselect compact active">
                                    <i class="icon-7 f-24"></i>
                                    <div class="d-flex flex-wrap">
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <input type="text" class="" placeholder="Enter A Keyword...">
                                    </div>

                                    <ul>
                                        <li class="m-0" v-for="index in 8">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect compact active">
                        <i class="icon-7 f-20"></i>
                        <div class="d-flex flex-wrap">
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <input type="text" class="" placeholder="Enter A Keyword...">
                        </div>
                        <ul>
                            <li class="m-0" v-for="index in 8">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect compact">
                                    <i class="icon-7 f-20"></i>
                                    <div class="d-flex flex-wrap">
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                                        <input type="text" class="" placeholder="Enter A Keyword...">
                                    </div>
                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect compact">
                        <i class="icon-7 f-20"></i>
                        <div class="d-flex flex-wrap">
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <div class="ready-selected">Option 11 <i class="icon-30"></i></div>
                            <input type="text" class="" placeholder="Enter A Keyword...">
                        </div>
                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>
            Disabled
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect compact disabled">
                                    <i class="icon-7 f-20"></i>
                                    <input type="text" class="" placeholder="Enter A Keyword...">
                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect disabled compact">
                        <i class="icon-7 f-20"></i>
                        <input type="text" class="" placeholder="Enter A Keyword...">
                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>

            Error
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-6 p-0">
                            <div style="margin-bottom: 0px">
                                <div claunis-old-2021unis-multiselect compact error">
                                    <i class="icon-7 f-20"></i>

                                    <input type="text" class="" placeholder="Enter A Keyword...">

                                    <ul>
                                        <li class="m-0">
                                            item
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-slot:htmcode>
                    <div claunis-old-2021unis-multiselect compact error">
                        <i class="icon-7 f-20"></i>

                        <input type="text" class="" placeholder="Enter A Keyword...">

                        <ul>
                            <li class="m-0">
                                item
                            </li>
                        </ul>
                    </div>
                </template>
            </dfault-vuew>


        </div>
    </div>
-->



    <div class="   col p-0" style="font-size: 24px ; margin-top: 60px;">
        Date picker
    </div>
    <div class="d-flex">
        <div class="col-6 p-0">

            <div class=" mt-4 col p-0 " style="font-size:18px; margin-top: 60px">
                Compact
            </div>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-2 p-0">
                            <div style="margin-bottom: 40px; width: 166px;">
                                <label>Date</label>
                                <button class="unis-multiselect">
                                    <input type="button" value="MM/DD/YY" class="">
                                    <img src="img/svgs/data.svg" alt="">
                                </button>
                            </div>
                        </div>
                    </div>

                </template>
                <template v-slot:htmcode>
                    <label>Date</label>
                    <button class="unis-multiselect">
                        <input type="button" value="MM/DD/YY" class="">
                        <img src="img/svgs/data.svg" alt="">
                    </button>
                </template>
            </dfault-vuew>
        </div>
        <div class="col-6 p-0">

            <div class=" mt-4 col p-0 " style="font-size:18px; margin-top: 60px">
                Compact
            </div>
            <dfault-vuew>
                <template v-slot:htm>
                    <div class="d-flex mb-4 " style="width: 100%">
                        <div class="col-2 p-0">
                            <div style="margin-bottom: 40px; width: 166px;">
                                <label>Date</label>
                                <button class="unis-multiselect compact">
                                    <input type="button" value="MM/DD/YY" class="">
                                    <img src="img/svgs/data.svg" alt="">
                                </button>
                            </div>
                        </div>
                    </div>

                </template>
                <template v-slot:htmcode>
                    <label>Date</label>
                    <button class="unis-multiselect compact">
                        <input type="button" value="MM/DD/YY" class="">
                        <img src="img/svgs/data.svg" alt="">
                    </button>
                </template>
            </dfault-vuew>
        </div>
    </div>



    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex p-0">
                    <div class="col-3 p-0">
                        <div style="margin-bottom: 210px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect">
                                <input type="button" value="MM/DD/YY">
                                <img src="img/svgs/data.svg" alt="">
                                <div class="unis-date-filter">
                                    <div class="date-box">
                                        <div class="date-view">
                                            <div class="operating-box pl-3 pr-3 mb-2">
                                                <i class="icon-15 cursor-p"></i>
                                                July 2018
                                                <i class="icon-8 cursor-p"></i>
                                            </div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates weeks">M</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">W</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">F</div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates ">
                                                <span>1</span>
                                            </div>
                                            <div class="dates ">
                                                <span>2</span>
                                            </div>
                                            <div class="dates ">
                                                <span>3</span>
                                            </div>
                                            <div class="dates ">
                                                <span>4</span>
                                            </div>
                                            <div class="dates ">
                                                <span>5</span>
                                            </div>
                                            <div class="dates ">
                                                <span>6</span>
                                            </div>
                                            <div class="dates day">
                                                <span>7</span>
                                            </div>
                                            <div class="dates day">
                                                <span>8</span>
                                            </div>
                                            <div class="dates day">
                                                <span>9</span>
                                            </div>
                                            <div class="dates day">
                                                <span>10</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>11</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>12</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>13</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>14</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>15</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>16</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>17</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>18</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>19</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>20</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>21</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>22</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>23</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>24</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>25</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>26</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>27</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>28</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>29</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>30</span>
                                            </div>
                                            <div class="dates day">
                                                <span>1</span>
                                            </div>
                                            <div class="dates day">
                                                <span>2</span>
                                            </div>
                                            <div class="dates day">
                                                <span>3</span>
                                            </div>
                                            <div class="dates day">
                                                <span>4</span>
                                            </div>
                                            <div class="dates day">
                                                <span>5</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                    <div class="col-3">
                        <div style="margin-bottom: 210px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect">
                                <input type="button" value="MM/DD/YY">
                                <img src="img/svgs/data.svg" alt="">
                                <div class="unis-date-filter">
                                    <div class="date-box">
                                        <div class="date-view">
                                            <div class="operating-box pl-3 pr-3 mb-2">
                                                <i class="icon-15 cursor-p"></i>
                                                July 2018
                                                <i class="icon-8 cursor-p"></i>
                                            </div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates weeks">M</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">W</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">F</div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates ">
                                                <span>1</span>
                                            </div>
                                            <div class="dates ">
                                                <span>2</span>
                                            </div>
                                            <div class="dates ">
                                                <span>3</span>
                                            </div>
                                            <div class="dates ">
                                                <span>4</span>
                                            </div>
                                            <div class="dates ">
                                                <span>5</span>
                                            </div>
                                            <div class="dates ">
                                                <span>6</span>
                                            </div>
                                            <div class="dates day">
                                                <span>7</span>
                                            </div>
                                            <div class="dates day">
                                                <span>8</span>
                                            </div>
                                            <div class="dates day">
                                                <span>9</span>
                                            </div>
                                            <div class="dates day">
                                                <span>10</span>
                                            </div>
                                            <div class="dates day asingle">
                                                <span>11</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>12</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>13</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>14</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>15</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>16</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>17</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>18</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>19</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>20</span>
                                            </div>
                                            <div class="dates day  ">
                                                <span>21</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>22</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>23</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>24</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>25</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>26</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>27</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>28</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>29</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>30</span>
                                            </div>
                                            <div class="dates day">
                                                <span>1</span>
                                            </div>
                                            <div class="dates day">
                                                <span>2</span>
                                            </div>
                                            <div class="dates day">
                                                <span>3</span>
                                            </div>
                                            <div class="dates day">
                                                <span>4</span>
                                            </div>
                                            <div class="dates day">
                                                <span>5</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                    <div class="col-3">
                        <div style="margin-bottom: 210px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect">
                                <input type="button" value="MM/DD/YY">
                                <img src="img/svgs/data.svg" alt="">
                                <div class="unis-date-filter">
                                    <div class="date-box">
                                        <div class="date-view">
                                            <div class="operating-box pl-3 pr-3 mb-2">
                                                <i class="icon-15 cursor-p"></i>
                                                July 2018
                                                <i class="icon-8 cursor-p"></i>
                                            </div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates weeks">M</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">W</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">F</div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates ">
                                                <span>1</span>
                                            </div>
                                            <div class="dates ">
                                                <span>2</span>
                                            </div>
                                            <div class="dates ">
                                                <span>3</span>
                                            </div>
                                            <div class="dates ">
                                                <span>4</span>
                                            </div>
                                            <div class="dates ">
                                                <span>5</span>
                                            </div>
                                            <div class="dates ">
                                                <span>6</span>
                                            </div>
                                            <div class="dates day">
                                                <span>7</span>
                                            </div>
                                            <div class="dates day">
                                                <span>8</span>
                                            </div>
                                            <div class="dates day">
                                                <span>9</span>
                                            </div>
                                            <div class="dates day">
                                                <span>10</span>
                                            </div>
                                            <div class="dates day  pitch-on">
                                                <span>11</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>12</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>13</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>14</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>15</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>16</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>17</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>18</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>19</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>20</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>21</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>22</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>23</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>24</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>25</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>26</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>27</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>28</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>29</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>30</span>
                                            </div>
                                            <div class="dates day">
                                                <span>1</span>
                                            </div>
                                            <div class="dates day">
                                                <span>2</span>
                                            </div>
                                            <div class="dates day">
                                                <span>3</span>
                                            </div>
                                            <div class="dates day">
                                                <span>4</span>
                                            </div>
                                            <div class="dates day">
                                                <span>5</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect">
                <input type="button" value="MM/DD/YY">
                <img src="img/svgs/data.svg" alt="">
                <div class="unis-date-filter">
                    <div class="date-box">
                        <div class="date-view">
                            <div class="operating-box pl-3 pr-3 mb-2">
                                <i class="icon-15 cursor-p"></i>
                                July 2018
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="dates weeks">S</div>
                            <div class="dates weeks">M</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">W</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">F</div>
                            <div class="dates weeks">S</div>
                            <div class="dates ">
                                <span>1</span>
                            </div>
                            <div class="dates ">
                                <span>2</span>
                            </div>
                            <div class="dates ">
                                <span>3</span>
                            </div>
                            <div class="dates ">
                                <span>4</span>
                            </div>
                            <div class="dates ">
                                <span>5</span>
                            </div>
                            <div class="dates ">
                                <span>6</span>
                            </div>
                            <div class="dates day">
                                <span>7</span>
                            </div>
                            <div class="dates day">
                                <span>8</span>
                            </div>
                            <div class="dates day">
                                <span>9</span>
                            </div>
                            <div class="dates day">
                                <span>10</span>
                            </div>
                            <div class="dates day  pitch-on">
                                <span>11</span>
                            </div>
                            <div class="dates day ">
                                <span>12</span>
                            </div>
                            <div class="dates day ">
                                <span>13</span>
                            </div>
                            <div class="dates day ">
                                <span>14</span>
                            </div>
                            <div class="dates day ">
                                <span>15</span>
                            </div>
                            <div class="dates day ">
                                <span>16</span>
                            </div>
                            <div class="dates day ">
                                <span>17</span>
                            </div>
                            <div class="dates day ">
                                <span>18</span>
                            </div>
                            <div class="dates day ">
                                <span>19</span>
                            </div>
                            <div class="dates day ">
                                <span>20</span>
                            </div>
                            <div class="dates day  asingle">
                                <span>21</span>
                            </div>
                            <div class="dates day ">
                                <span>22</span>
                            </div>
                            <div class="dates day ">
                                <span>23</span>
                            </div>
                            <div class="dates day ">
                                <span>24</span>
                            </div>
                            <div class="dates day ">
                                <span>25</span>
                            </div>
                            <div class="dates day ">
                                <span>26</span>
                            </div>
                            <div class="dates day ">
                                <span>27</span>
                            </div>
                            <div class="dates day ">
                                <span>28</span>
                            </div>
                            <div class="dates day ">
                                <span>29</span>
                            </div>
                            <div class="dates day ">
                                <span>30</span>
                            </div>
                            <div class="dates day">
                                <span>1</span>
                            </div>
                            <div class="dates day">
                                <span>2</span>
                            </div>
                            <div class="dates day">
                                <span>3</span>
                            </div>
                            <div class="dates day">
                                <span>4</span>
                            </div>
                            <div class="dates day">
                                <span>5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </button>

        </template>
    </dfault-vuew>
    <div style="height: 200px"></div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex p-0">
                    <div class="col-3 p-0">
                        <div style="margin-bottom: 40px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect">
                                <input type="button" value="MM/DD/YY">
                                <img src="img/svgs/data.svg" alt="">
                            </button>
                        </div>
                    </div>
                    <div class="col-3">
                        <div style="margin-bottom: 210px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect">
                                <input type="button" value="MM/DD/YY">
                                <img src="img/svgs/data.svg" alt="">
                                <div class="unis-date-filter right">
                                    <div class="date-box">
                                        <div class="date-view">
                                            <div class="operating-box pl-3 pr-3 mb-2">
                                                <i class="icon-15 cursor-p"></i>
                                                July 2018
                                                <i class="icon-8 cursor-p"></i>
                                            </div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates weeks">M</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">W</div>
                                            <div class="dates weeks">T</div>
                                            <div class="dates weeks">F</div>
                                            <div class="dates weeks">S</div>
                                            <div class="dates ">
                                                <span>1</span>
                                            </div>
                                            <div class="dates ">
                                                <span>2</span>
                                            </div>
                                            <div class="dates ">
                                                <span>3</span>
                                            </div>
                                            <div class="dates ">
                                                <span>4</span>
                                            </div>
                                            <div class="dates ">
                                                <span>5</span>
                                            </div>
                                            <div class="dates ">
                                                <span>6</span>
                                            </div>
                                            <div class="dates day">
                                                <span>7</span>
                                            </div>
                                            <div class="dates day">
                                                <span>8</span>
                                            </div>
                                            <div class="dates day">
                                                <span>9</span>
                                            </div>
                                            <div class="dates day">
                                                <span>10</span>
                                            </div>
                                            <div class="dates day pitch-on">
                                                <span>11</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>12</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>13</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>14</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>15</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>16</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>17</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>18</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>19</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>20</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>21</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>22</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>23</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>24</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>25</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>26</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>27</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>28</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>29</span>
                                            </div>
                                            <div class="dates day ">
                                                <span>30</span>
                                            </div>
                                            <div class="dates day">
                                                <span>1</span>
                                            </div>
                                            <div class="dates day">
                                                <span>2</span>
                                            </div>
                                            <div class="dates day">
                                                <span>3</span>
                                            </div>
                                            <div class="dates day">
                                                <span>4</span>
                                            </div>
                                            <div class="dates day">
                                                <span>5</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect">
                <input type="button" value="MM/DD/YY">
                <img src="img/svgs/data.svg" alt="">
                <div class="unis-date-filter right">
                    <div class="date-box">
                        <div class="date-view">
                            <div class="operating-box pl-3 pr-3 mb-2">
                                <i class="icon-15 cursor-p"></i>
                                July 2018
                                <i class="icon-8 cursor-p"></i>
                            </div>
                            <div class="dates weeks">S</div>
                            <div class="dates weeks">M</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">W</div>
                            <div class="dates weeks">T</div>
                            <div class="dates weeks">F</div>
                            <div class="dates weeks">S</div>
                            <div class="dates ">
                                <span>1</span>
                            </div>
                            <div class="dates ">
                                <span>2</span>
                            </div>
                            <div class="dates ">
                                <span>3</span>
                            </div>
                            <div class="dates ">
                                <span>4</span>
                            </div>
                            <div class="dates ">
                                <span>5</span>
                            </div>
                            <div class="dates ">
                                <span>6</span>
                            </div>
                            <div class="dates day">
                                <span>7</span>
                            </div>
                            <div class="dates day">
                                <span>8</span>
                            </div>
                            <div class="dates day">
                                <span>9</span>
                            </div>
                            <div class="dates day">
                                <span>10</span>
                            </div>
                            <div class="dates day pitch-on">
                                <span>11</span>
                            </div>
                            <div class="dates day ">
                                <span>12</span>
                            </div>
                            <div class="dates day ">
                                <span>13</span>
                            </div>
                            <div class="dates day ">
                                <span>14</span>
                            </div>
                            <div class="dates day ">
                                <span>15</span>
                            </div>
                            <div class="dates day ">
                                <span>16</span>
                            </div>
                            <div class="dates day ">
                                <span>17</span>
                            </div>
                            <div class="dates day ">
                                <span>18</span>
                            </div>
                            <div class="dates day ">
                                <span>19</span>
                            </div>
                            <div class="dates day ">
                                <span>20</span>
                            </div>
                            <div class="dates day ">
                                <span>21</span>
                            </div>
                            <div class="dates day ">
                                <span>22</span>
                            </div>
                            <div class="dates day ">
                                <span>23</span>
                            </div>
                            <div class="dates day ">
                                <span>24</span>
                            </div>
                            <div class="dates day ">
                                <span>25</span>
                            </div>
                            <div class="dates day ">
                                <span>26</span>
                            </div>
                            <div class="dates day ">
                                <span>27</span>
                            </div>
                            <div class="dates day ">
                                <span>28</span>
                            </div>
                            <div class="dates day ">
                                <span>29</span>
                            </div>
                            <div class="dates day ">
                                <span>30</span>
                            </div>
                            <div class="dates day">
                                <span>1</span>
                            </div>
                            <div class="dates day">
                                <span>2</span>
                            </div>
                            <div class="dates day">
                                <span>3</span>
                            </div>
                            <div class="dates day">
                                <span>4</span>
                            </div>
                            <div class="dates day">
                                <span>5</span>
                            </div>
                        </div>
                    </div>
                </div>
            </button>
        </template>
    </dfault-vuew>
    <div style="height: 100px"></div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex mb-4 " style="width: 100%">
                <div class="col-12 d-flex p-0">
                    <div class="col-3 p-0">
                        <div style="margin-bottom: 40px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect ">
                                <input type="button" value="00:00 AM">
                                <img src="img/svgs/clock.svg" alt="">
                            </button>
                        </div>
                    </div>
                    <div class="col-3">
                        <div style="margin-bottom: 210px; width: 166px;">
                            <label>Date</label>
                            <button class="unis-multiselect active">
                                <input type="button" value=" 12:00 PM">
                                <img src="img/svgs/clock.svg" alt="">
                                <ul class="border-0">
                                    <li class="m-0 active">
                                        12:00 PM
                                    </li>
                                    <li class="m-0">
                                        12:30 PM
                                    </li>
                                    <li class="m-0">
                                        1:00 PM
                                    </li>
                                    <li class="m-0">
                                        1:30 PM
                                    </li>
                                    <li class="m-0">
                                        2:00 PM
                                    </li>
                                    <li class="m-0">
                                        2:30 PM
                                    </li>
                                </ul>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label>Date</label>
            <button class="unis-multiselect active">
                <input type="button" value=" 12:00 PM">
                <img src="img/svgs/clock.svg" alt="">
                <ul class="border-0">
                    <li class="m-0 active">
                        12:00 PM
                    </li>
                    <li class="m-0">
                        12:30 PM
                    </li>
                    <li class="m-0">
                        1:00 PM
                    </li>
                    <li class="m-0">
                        1:30 PM
                    </li>
                    <li class="m-0">
                        2:00 PM
                    </li>
                    <li class="m-0">
                        2:30 PM
                    </li>
                </ul>
            </button>
        </template>
    </dfault-vuew>


    <div style="height: 200px"></div>
</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>